import { useDispatch, useSelector } from 'react-redux'
import './index.scss'
import { useEffect, useState } from 'react'
import { fetchCollectInfo } from '@/store/modules/collectStore'
import { Avatar, Empty, List } from 'antd'
import './index.scss'
import { getBlogInfoAPI } from '@/api/blog'
import dayjs from 'dayjs'
import { useNavigate } from 'react-router-dom'
import avater from '@/assets/avater.jpeg'

const StarBlog = () => {
    const dispacth = useDispatch()
    const userId = useSelector(state => state.user.userInfo.id)
    const starInfo = useSelector(state => state.collect.collectInfo)
    const [starBlogList, setStarBlogList] = useState([])
    const getStarInfo = async () => {
                await dispacth(fetchCollectInfo(userId))
            }
            // 获取喜欢博客信息
            const fetchBlogInfo = async () => {
                if (starInfo && starInfo.length) {
                    const requestArray = starInfo.map(async (item) => {
                    return await getBlogInfoAPI(item.blogId)
                })
                try {
                    const results = await Promise.all(requestArray)
                    setStarBlogList(results)
                } catch (error) {
                    // 错误处理
                    console.error(error)
                }
            }           
        }
    useEffect(() => {        
        getStarInfo().then(fetchBlogInfo)
    }, [dispacth, userId])
    // 去往博客详情
    const navigate = useNavigate()
    const handleToDetail = (id) => {
        if (starInfo && starInfo.length) {
            starInfo.map((item) => {
                if (item.blogId === id) {
                    navigate('/detail', { state: { blogId: id, isStar: true, starId: item.id  } })
                }
            })
        }
    }

     // 分页
    const [params, setParams] = useState({
        page: 1,
        per_page: 2
    })
    const pageChange = (page) => {
        // 拿到当前页参数 修改params
        setParams({
        ...params,
        page
        })
    }

    return (
        <div className="collect-blog">
            { starBlogList && starBlogList.length ?
                <List
                itemLayout="vertical"
                size="large"
                pagination={{
                    current: params.page,
                    pageSize: params.per_page,
                    onChange: pageChange,
                    total: starBlogList.length
                  }} 
                dataSource={starBlogList}
                renderItem={(item) => (
                <div onClick={() => handleToDetail(item.data.id)}>
                    <List.Item
                        key={item.data.id}
                        >
                        <List.Item.Meta
                            avatar={<Avatar src={avater} />}
                            title={item.data.title}
                            description={dayjs(item.data.createTime).format('YYYY-MM-DD')}
                            
                        />
                        <div className="text">
                            <span>{item.data.text.replace(/<img[^>]+>|<br>/g, '')}</span>
                        </div>
                    </List.Item>
                    </div>
                )}
                />
            : <div>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </div> }
        </div>
    )
}

export default StarBlog